## Loading required package: sp
## rgdal: version: 1.4-8, (SVN revision 845)
##  Geospatial Data Abstraction Library extensions to R successfully loaded
##  Loaded GDAL runtime: GDAL 2.4.2, released 2019/06/28
##  Path to GDAL shared files: /Library/Frameworks/R.framework/Versions/3.6/Resources/library/rgdal/gdal
##  GDAL binary built with GEOS: FALSE 
##  Loaded PROJ.4 runtime: Rel. 5.2.0, September 15th, 2018, [PJ_VERSION: 520]
##  Path to PROJ.4 shared files: /Library/Frameworks/R.framework/Versions/3.6/Resources/library/rgdal/proj
##  Linking to sp version: 1.3-2
## 
## Attaching package: 'shinydashboard'
## The following objects are masked from 'package:flexdashboard':
## 
##     renderValueBox, valueBox, valueBoxOutput
## The following object is masked from 'package:graphics':
## 
##     box

Roadmap

  • Final Project: some more details
  • Shiny Part II
  • Example: Visualizing the World Development Indicators in Shiny

Final Project

Final Video Presentations - Details

  • Prepare a 3-5 min presentation.
  • Remember: Everyone can look at your website output even before class or with you.

Final Video Presentations - Software

  • SnagIt or Camtasia: Screen capture and recording softwares. Use the 15-day trial. (Win/Mac)
  • Screencastify: Record, edit, and share videos directly in the Chrome Browser. Videos up to 5min free. (Win/Mac. Chrome needed)
  • Loom: Another Chrome extension for screen capture and video creation. Education accounts are free after verification. (Win/Mac. Chrome needed)

Feedback to other project

  • Each student will provide comments about the visualizations used in another project. These comments can then be used to inform some final adjustments before submission.
  • We will post links to all final projects on a website.
  • Everyone will receive an email specifying which project they should comment on.
  • Comments are anonymous and shared on Github.

How is the final project evaluated?

  1. Visualization
    • Is your visualization effective in answering the questions you intended to address? Is the storytelling clear?
    • Do the visualizations follow visualization principles?
    • Is it informative and interesting for a user?
    • Does it allow some sensible interactive exploration?
  2. Implementation
    • What is the quality of your implementation?
    • Is it appropriately polished, robust, and reliable?
  3. Presentation
    • Are your web site and presentation clear, engaging, and effective?

Publishing your final project

  • OPTION A: Publish you final project on GitHub pages (or any other web host you like). Simply convert your .rmd file into a HTML document and enable GitHub pages for a public(!) repository of your choice to render the result. Or make a simple website with a few child pages linked together.
  • OPTION B: You can publish (multiple) interactive documents to the ShinyApps hosted service. There are limits to the amount of use, but that should be sufficient for sharing in class.
  • OPTION C: Use RPubs.com to publish a RMarkdown document directly from R.

Beside the visualizations, your process book, code and data should be linked from the web site as well. Make sure to cite any code, ideas, and other insights you used.

Visualizing World Development Indicators

Part 1 - Making the plot

Switch to the tutorial

Please start a new RStudio session by opening the file wdi-shiny_part1.Rproj to follow along in the tutorial.

Intro to R Shiny - Part II

Where were we

  1. Building a simple shiny app
  2. Using reactive functions to customize behavior
  3. Make it pretty - today’s lecture

HTML is the basis of the UI

ui <- fluidPage()
## <div class="container-fluid"></div>

HTML is the basis of the UI

sliderInput(inputId = "num",
  label = "Choose a number",
  value = 25, min = 1, max = 100)
## <div class="form-group shiny-input-container">
##   <label class="control-label" for="num">Choose a number</label>
##   <input class="js-range-slider" id="num" data-min="1" data-max="100" data-from="25" data-step="1" data-grid="true" data-grid-num="9.9" data-grid-snap="false" data-prettify-separator="," data-prettify-enabled="true" data-keyboard="true" data-data-type="number"/>
## </div>
plotOutput("myPlot")
## <div id="myPlot" class="shiny-plot-output" style="width: 100% ; height: 400px"></div>

HTML is the basis of the UI

Recall: The User Interface

  • the ui() part of your app creates HTML representations of your R functions
  • fluidPage() is a quick set up of the UI to call the output of a complete HTML page to the browser

Creating a layout

  • just as in HTML pages, we can create a layout of the page in which we place all visual elements.
  • take a look at this layout tutorial for shiny for a nice introduction of some of the layout elements

Shiny grid layout system: fluidRow()

  • fluidRow() and column() simply divide the page into rows and columns. Think of a table (or grid) as a visual analogue.

Shiny grid layout system: column()

  • column() adds columns within a row. Each new column goes to the left of the previous column.
  • You can specify the width and offset of each column out of 12.

Ex: fluidRow and column

ui <- fluidPage(
  fluidRow(
    column(width = 4,
      "width = 4"
    ),
    column(width = 3, offset = 2,
      "width 3, offset 2"
    )
  )
)
shinyApp(ui, server = function(input, output) { })
Shiny applications not supported in static R Markdown documents

Segmenting layouts using panels

  • we can group multiple elements into a panel which has its own properties
  • provides a simple visual clue for users of what elements are grouped together

wellPanel()

ui <- fluidPage(
    wellPanel(
      sliderInput(inputId = "num", 
      label = "Choose a number", 
      value = 25, min = 1, max = 100),
    textInput(inputId = "title", 
      label = "Write a title",
      value = "Histogram of Random Normal Values")
  ),
  plotOutput("hist")
)

server <- function(input, output) {
  output$hist <- renderPlot({
    hist(rnorm(input$num), main = input$title)
  })
}

shinyApp(ui = ui, server = server)

wellPanel()

Shiny applications not supported in static R Markdown documents

More panels in shiny

Tabs and Navigation Panels

  • We can subdivide the user-interface into discrete sections.
  • This can be accomplished using the tabsetPanel() function.

Example: tabsetPanel()

ui <- fluidPage(title = "Random generator",
   tabsetPanel( 
     tabPanel(title = "Normal data",
      plotOutput("norm"),
      actionButton("renorm", "Resample")
    ),
    tabPanel(title = "Uniform data",
      plotOutput("unif"),
      actionButton("reunif", "Resample")
    ),
    tabPanel(title = "Chi Squared data",
      plotOutput("chisq"),
      actionButton("rechisq", "Resample")
    )
  )
)

server <- function(input, output) {# Excluded for brevity}
shinyApp(server = server, ui = ui)

Example: tabsetPanel()

Shiny applications not supported in static R Markdown documents

tabsetPanel() - with headers

Sidebar navigation with navlistPanel()

Example: navlistPanel()

ui <- fluidPage(title = "Random generator",
  navlistPanel(              
    tabPanel(title = "Normal data",
  plotOutput("norm"),
      actionButton("renorm", "Resample")
    ),
    tabPanel(title = "Uniform data",
      plotOutput("unif"),
      actionButton("reunif", "Resample")
    ),
    tabPanel(title = "Chi Squared data",
      plotOutput("chisq"),
      actionButton("rechisq", "Resample")
    )
  )
)
server <- function(input, output) { # omitted for brevity }
shinyApp(server = server, ui = ui)

Example: navlistPanel()

Shiny applications not supported in static R Markdown documents

Pre-canned Layouts in Shiny

  • you can custom-make your own layout or use one of the several pre-packaged layouts that come with shiny

sidebar() layout

sidebar() layout

Navigation Bar with more components

Example: navbarPage()

ui <- navbarPage(title = "Random generator",
  tabPanel(title = "Normal data",
    plotOutput("norm"),
    actionButton("renorm", "Resample")
  ),
  navbarMenu(title = "Other data",
    tabPanel(title = "Uniform data",
      plotOutput("unif"),
      actionButton("reunif", "Resample")
    ),
    tabPanel(title = "Chi Squared data",
      plotOutput("chisq"),
      actionButton("rechisq", "Resample")
    )
  )
)
server <- function(input, output) { # omitted for brevity}
shinyApp(server = server, ui = ui)

Example: navbarPage()

Shiny applications not supported in static R Markdown documents

Dashboards out of the box

shinydashboard::dashboardPage()

Shiny applications not supported in static R Markdown documents

Style your app with CSS

What does CSS do?

  • most styling and customization of the appearance of website elements is done through CSS (Cascading Style Sheets)

CSS in Shiny

CSS in Shiny

There are three ways Shiny works with CSS. To get CSS into your Shiny App, you can:

  1. Add style sheets to the www directory
  2. Add CSS to your HTML header
  3. Add styling directly to HTML tags

Add style sheet to www directory

  • Lot’s of nice, free themes that work with bootstrap available from http://bootswatch.com/
  • Download a theme and add it the www folder of your app.
  • Alter anything you want in the global CSS file

Example: style sheet in www directory

ui <- fluidPage(
  theme = "bootstrap_slate.css",  # Saved in the www folder
  tags$h1("My application", style = "color:#DAA520;"), # CSS Style passed directly
  titlePanel("My Application"),
  sidebarLayout(
    sidebarPanel(
      sliderInput("obs",
                  "Number of observations:",
                  min = 0,
                  max = 1000,
                  value = 500)),
    mainPanel(
      plotOutput("distPlot")
    )
  )
)
server <- function(input, output) { # omitted for brevity}
shinyApp(ui, server)

Shiny applications not supported in static R Markdown documents


Shiny applications not supported in static R Markdown documents

What we learned

Continuing our sample application

Visualizing the World Development Indicators with a time-series graph and a leaflet map.

What we want

To the tutorial

Please start a new RStudio session by opening the file wdi-shiny_part2.Rproj to follow along in the tutorial. Part II starts at line 480.

Other Resources

Shiny Website

The Shiny website has plenty of tutorials, code for small examples, a gallery of full projects etc. Check it out.

Examples

About 180 Demo Examples are included in the shiny package and can be called directly from R and are all hosted.

For your convenience, I have also added them to this week’s data folder. Let’s take a look.

Highcharter and Themes

Bus Dashboard

Superzip

Movie Explorer